<template>
	<view class="recharge-container">
		<!-- 页面标题 -->
		<view class="page-title">充值金额</view>

		<!-- 金额选择区域 -->
		<view class="amount-container">
			<view class="amount-item" v-for="item in amountList" :key="item.id"
				:class="{ 'active': selectedAmountId === item.id }" @click="selectAmount(item.id)">
				<text class="amount-money">{{ item.money }}元</text>
				<text class="amount-desc" v-if="item.discount_money > 0">优惠{{ item.discount_money }}元</text>
			</view>
		</view>

		<!-- 支付方式选择 -->
		<view class="payment-methods">
			<view class="method-title">支付方式</view>
			<view class="method-item" :class="{ 'active': selectedPayment === 'wechat' }"
				@click="selectPayment('wechat')">
				<image src="/static/androidImg/icon_pay_wechat.png" class="method-icon"></image>
				<text class="method-name">微信支付</text>
				<image src="/static/androidImg/icon_pay_yes.png" class="method-check"
					v-if="selectedPayment === 'wechat'"></image>
				<image src="/static/androidImg/icon_pay_not.png" class="method-check" v-else></image>
			</view>
			<!-- <view class="method-item" :class="{ 'active': selectedPayment === 'alipay' }" @click="selectPayment('alipay')">
        <image src="/static/androidImg/icon_pay_zhi.png" class="method-icon"></image>
        <text class="method-name">支付宝支付</text>
        <image src="/static/androidImg/icon_pay_yes.png" class="method-check" v-if="selectedPayment === 'alipay'"></image>
        <image src="/static/androidImg/icon_pay_not.png" class="method-check" v-else></image>
      </view> -->
		</view>

		<!-- 立即充值按钮 -->
		<view class="recharge-btn" @click="handleRecharge">
			<text class="btn-text">立即充值</text>
		</view>
	</view>
</template>

<script>
	import {
		getSetRegMoney,
		recharge
	} from '../../api/request.js';

	export default {
		data() {
			return {
				amountList: [], // 充值金额列表
				selectedAmountId: null, // 选中的金额ID
				selectedPayment: 'wechat', // 选中的支付方式
				loading: false // 加载状态
			};
		},

		onLoad() {
			// 页面加载时获取充值金额列表
			this.getRechargeAmounts();
		},

		methods: {
			// 获取充值金额列表
			getRechargeAmounts() {
				this.loading = true;
				getSetRegMoney().then(res => {
					if (res.code === 1 && res.data) {
						this.amountList = res.data;
						// 默认选中第一个金额
						if (this.amountList.length > 0) {
							this.selectedAmountId = this.amountList[0].id;
						}
					} else {
						uni.showToast({
							title: res.msg || '获取充值金额失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('获取充值金额失败:', err);
					uni.showToast({
						title: err.msg || '网络错误',
						icon: 'none'
					});
				}).finally(() => {
					this.loading = false;
				});
			},

			// 选择充值金额
			selectAmount(id) {
				this.selectedAmountId = id;
			},

			// 选择支付方式
			selectPayment(method) {
				this.selectedPayment = method;
			},

			// 处理充值
			handleRecharge() {
				if (!this.selectedAmountId) {
					uni.showToast({
						title: '请选择充值金额',
						icon: 'none'
					});
					return;
				}

				this.loading = true;
				// 调用充值接口
				recharge({
					reg_id: this.selectedAmountId,
					type: 3 // 固定传3
				}).then(res => {
					if (res.code === 1 && res.data) {
						// 调用uni.requestPayment发起支付
						this.requestPayment(res.data);
					} else {
						uni.showToast({
							title: res.msg || '充值请求失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('充值请求失败:', err);
					uni.showToast({
						title: err.msg || '网络错误',
						icon: 'none'
					});
				}).finally(() => {
					this.loading = false;
				});
			},

			// 调用支付接口
			requestPayment(payData) {
				uni.requestPayment({
					provider: this.selectedPayment === 'wechat' ? 'wxpay' : 'alipay',
					timeStamp: payData.timeStamp.toString(),
					nonceStr: payData.nonceStr,
					package: payData.package,
					signType: payData.signType,
					paySign: payData.sign,
					success: (res) => {
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						});
						// 支付成功后返回钱包页面
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					},
					fail: (err) => {
						uni.showToast({
							title: '支付失败: ' + err.errMsg,
							icon: 'none'
						});
					}
				});
			}
		},

		mounted() {
			// 页面加载时获取充值金额
			this.getRechargeAmounts();
		}
	};
</script>

<style lang="scss">
	.recharge-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 0 30rpx;

		.page-title {
			font-size: 36rpx;
			color: #333;
			text-align: center;
			padding: 40rpx 0;
			font-weight: bold;
		}

		.amount-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 20rpx;
			margin-bottom: 60rpx;

			.amount-item {
				width: calc(33.33% - 40rpx);
				background: #fff;
				border-radius: 12rpx;
				padding: 20rpx 10rpx;
				text-align: center;
				border: 2rpx solid #d6d7dc;
				position: relative;

				&.active {
					border-color: #ff6b00;
					background-color: #fff8f0;
				}

				.amount-money {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}

				.amount-desc {
					font-size: 24rpx;
					color: #ff6b00;
					margin-top: 10rpx;
				}
			}
		}

		.payment-methods {
			background: #fff;
			border-radius: 12rpx;
			padding: 20rpx 30rpx;
			margin-bottom: 80rpx;

			.method-title {
				font-size: 28rpx;
				color: #999;
				margin-bottom: 20rpx;
			}

			.method-item {
				display: flex;
				align-items: center;
				padding: 25rpx 0;
				border-bottom: 1rpx solid #f5f5f5;

				&:last-child {
					border-bottom: none;
				}

				.method-icon {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}

				.method-name {
					font-size: 30rpx;
					color: #333;
					flex: 1;
				}

				.method-check {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.recharge-btn {
			position: fixed;
			bottom: 30rpx;
			left: 30rpx;
			right: 30rpx;
			height: 90rpx;
			background-color: #ff6b00;
			border-radius: 45rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn-text {
				font-size: 32rpx;
				color: #fff;
				font-weight: bold;
			}
		}
	}
</style>